<script setup>
import { onMounted, ref } from "vue";
onMounted(() => {
  let time_canvas = document.getElementById("time_canvas");
  let page = document.getElementById("page");
  spliceTimes(1440);
  window.addEventListener(
    "resize",
    function () {
      // time_canvas.width = window.innerWidth;
      // time_canvas.height = page.innerHeight;
    },
    false
  );
});
const nowDate = ref(new Date()); // 获取当前的日期

/***
 * 转换日期为时间戳
 * */
function formDate(time) {
  function formZero(num) {
    return num.toString().padStart(2, "0");
  }
  const Year = nowDate.value.getFullYear();
  const Mounted = formZero(nowDate.value.getMonth() + 1);
  const Day = formZero(nowDate.value.getDate());
  const newDate = new Date(`${Year}-${Mounted}-${Day} ${time}`);
  return newDate.valueOf() / 1000;
}

/**
 * 时间切割算法
 * **/
function spliceTimes(clientWidth) {
  let time_canvas = document.getElementById("time_canvas");
  let ctx = time_canvas.getContext("2d");
  time_canvas.width = 1400; // 设置宽度
  time_canvas.height = 50; // 设置高度
  ctx.clearRect(0, 0, clientWidth, 50);

  // 获取中间部分的时间
  let centerTime =
    (parseInt(formDate("12:00:00") / 60) - parseInt(clientWidth / 2)) % 60;
  console.log(centerTime);
  for (let i = 0; i < clientWidth; i++) {
    if ((centerTime + i) % 60 == 0) {
      console.log(1);
      timeCanvas(i, 0, i, 10);
    }
  }
}

/**
 * 渲染时间刻度方法(画线)
 * **/
function timeCanvas(movX, movY, endX, endY) {
  let time_canvas = document.getElementById("time_canvas");
  let ctx = time_canvas.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(movX, movY);
  ctx.lineTo(endX, endY);
  ctx.strokeStyle = "red";
  ctx.stroke();
}
</script>
<template>
  <!-- 时间刻度组件 -->
  <div>
    <div class="page" id="page">
      <canvas
        id="time_canvas"
        style="width: 100%; height: 100%"
        height="50"
      ></canvas>
    </div>
  </div>
</template>

<style scoped>
.page {
  border: 1px solid red;
}
</style>
